<%@page import="com.jfinal.kit.PropKit" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" import="cn.com.dashihui.web.common.OrderCode" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
    <title>团购统计</title>
    <jsp:include page="../../include/header.jsp"></jsp:include>
    <jsp:include page="../../include/javascripts.jsp"></jsp:include>
    <style>
            html, body, #main {
                width: 100%;
                height: 100%;
                margin: 0;
            }
            #main {
                background: #fff;
            }
        </style>
</head>
<body>
		
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<!-- 柱状图的DOM -->
	<div id="main2" style="width: 100%;height:600px;"></div>
	<hr style=" height:2px;border:none;border-top:2px solid black;" />
	<!-- 扇形图的DOM -->
	<div id="main" style="width: 100%;height:600px;"></div>
	
	<script type="text/javascript">
		var daizhifu=${daizhifu};
		var daichuku=${daichuku};
		var daishouhuo=${daishouhuo};
		var daipingjia=${daipingjia};
		var yi=${complete};
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		
		// 指定图表的配置项和数据
		var option = {
			title : {
				text: '订单状态占比',
// 				subtext: '纯属虚构',
				align:'center'
			},
			toolbox: {
				// y: 'bottom',
				feature: {
					dataView: {},
					saveAsImage: {
						pixelRatio: 2
					}
				}
			},
			tooltip : {
				trigger: 'item',
				formatter: "{a} <br/>{b} : {c} ({d}%)"
			},
			legend: {
				align : 'left',
				data:['未支付','待出库','待收货','待评价','已完成']
			},
			calculable : true,
			series : [
				{
					name:'支付状态',
					type:'pie',
					radius : '55%',
					center: ['50%', 225],
					data:[
						{value:daizhifu, name:'未支付'},
						{value:daichuku, name:'待出库'},
						{value:daishouhuo, name:'待收货'},
						{value:daipingjia, name:'待评价'},
						{value:yi, name:'已完成'}
					]
				}
			]
			
		};
	    
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
		
		
		
		
		var dataPaginator;
		$(query);
		function query(){
			var params = {};
			if(dataPaginator){
				dataPaginator.destroy();
			}
			dataPaginator = Kit.pagination("#dataPagination","${BASE_PATH}/bus/order/queryGbGoods",params,function(result){
				//根据模板渲染数据并填充
				$("#dataList").empty().append(template("dataTpl",result.object));
				var count = result.object;
				//柱形图
				var myChart2 = echarts.init(document.getElementById('main2'));
				var xAxisData = [];
// 				var data1 = [];
// 				var data2 = [];
// 				var data3 = [];
// 				var data4 = [];
				for (var i = 0; i < result.object.length; i++) {
					xAxisData.push(result.object[i].name.substring(0,5)+":"+ result.object[i].id);
// 					data1.push((Math.random() * 5).toFixed(2));
// 					data2.push(Math.random().toFixed(2));
// 					data3.push((Math.random() + 0.5).toFixed(2));
// 					data4.push((Math.random() + 0.3).toFixed(2));
				}
				var data = [[],[],[],[]];
				
				for (var i = 0; i < data.length; i++) {
					if(i==0){
						for (var j = 0; j < result.object.length; j++) {
							data[i][j]=result.object[j].countnum;
						}
					}else if(i==1){
						for (var j = 0; j < result.object.length; j++) {
							data[i][j]=result.object[j].count1;
						}
					}else if(i==2){
						for (var j = 0; j < result.object.length; j++) {
							data[i][j]=result.object[j].count2;
						}
					}else if(i==3){
						for (var j = 0; j < result.object.length; j++) {
							data[i][j]=result.object[j].count3;
						}
					}
					
				}
				
				var option2={
						legend: {
						data: ['库存', '下单人数', '已支付', '已免单'],
						align: 'left'
					},
					title : {
						text: '团购商品统计',
// 						subtext: '纯属虚构',
						align:'center'
					},
					toolbox: {
						// y: 'bottom',
						feature: {
							magicType: {
								type: ['line', 'bar', 'stack', 'tiled']
							},
							dataZoom: {
								yAxisIndex: false
							},
							dataView: {},
							saveAsImage: {
								pixelRatio: 2
							}
						}
					},
					tooltip: {},
					dataZoom: [{
						startValue: 0,
						endValue: 9,
						type: 'inside'
					}, {
						startValue: 0,
						endValue: 9,
						type: 'slider'
					}],
					xAxis: {
						data: xAxisData,
						silent: false,
						splitLine: {
							show: false
						},
						splitArea: {
							show: false
						}
					},
					yAxis: {
						splitArea: {
						show: false
						}
					},
					series: [{
						show: false,
						name: '库存',
						type: 'bar',
						stack: 'one',
						data: data[0]
					}, {
						show: false,
						name: '下单人数',
						type: 'bar',
						stack: 'two',
						data: data[1]
					}, {
						name: '已支付',
						type: 'bar',
						stack: 'three',
						data: data[2]
					}, {
						name: '已免单',
						type: 'bar',
						stack: 'four',
						data: data[3],
					}],
					 animationDelay: function (idx) {
						return idx * 5;
					},
					animationDelayUpdate: function (idx) {
						return idx * 5;
					} 
				};
			// 使用刚指定的配置项和数据显示图表。
			      myChart2.setOption(option2);
			});
		}
		
		
		
		
		
		
		
		
		
	
	 
    </script>
</body>
</html>